<template>
  <div id="Logindli">
    <!-- <h1>允许/禁止登录弹框</h1> -->
    <el-dialog
      title="允许/禁止登录"
      :visible="loginVisible"
      width="30%"
      @close="myclose"
    >
      <!-- <span>允许/禁止登录</span> -->
      <el-button-group>
        <el-button
          icon="el-icon-success"
          v-model="value"
          @click="allow"
          :type="value == 1 ? 'primary' : 'info'"
          >允许登录</el-button
        >
        <el-button
          v-model="value"
          @click="prohibit"
          :type="value == 0 ? 'primary' : 'info'"
          >禁止登录<i class="el-icon-error el-icon--right" id="jinzhi"></i
        ></el-button>
      </el-button-group>
      <span slot="footer" class="dialog-footer">
        <el-button @click="quxiao">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "Logindli",
  props: ["loginVisible", "changeData"],
  data() {
    return {
      value: 1,
    };
  },
  methods: {
    /* 禁止 */
    prohibit() {
      this.value = 0;
      // console.log(this.value);
    },
    /* 允许 */
    allow() {
      this.value = 1;
      // console.log(this.value);
    },
    /* 提交修改 */
    submit() {
      this.$emit("closeDli", this.value);
    },
    /* 取消 */
    quxiao() {
      this.$emit("closeDli");
    },
    myclose() {
      this.$emit("closeDli");
    },
  },
};
</script>

<style>
#jinzhi {
  color: red;
}
</style>